import React, { Component } from 'react';
import GotService from '../../services/gotService';
import ErrorMessage from '../errorMessage/errorMessage';
import Spinner from '../spinner/spinner';
import './charDetails.css';

const Field = ({ item, field, label }) => {

    return (
        <li className="list-group-item d-flex justify-content-between">
            <span className="term">{label}</span>
            {/* поле приходит нам из Api */}
            <span>{[field]}</span>
        </li>

    )
}
export { Field };


export default class CharDetails extends Component {

    //1. получаем данные с котрыми будем работать
    GotService = new GotService();

    //2. определяес состояние компонента которого будем отисовывать-render ить
    state = {
        char: null,
        loading: true,
        error: false,
    }

    componentDidMount() {
        this.updateChar();
    }

    componentDidUpdate(prevProps) {
        if (this.props.charId !== prevProps.charId) {
            this.updateChar();
        }
    }
    //хук обработки ошибки
    componentDidCatch() {
        this.setState({
            error: true,
        })
    }

    onCharLoaded = (char) => {
        this.setState({
            char,
            loading: false,
        })
    }

    onError = () => {
        this.setState({
            error: true,
            loading: false,
        })
    }

    //3. функция появления персонажа    
    updateChar = () => {
        const { charId } = this.props;
        if (!charId) {
            return;
        }
        //3.1 получение персонажа из данных по его id
        this.GotService.getCharacter(charId)
            //3.2 помещение персонажа по его id в state
            .then(this.onCharLoaded)
            .catch(this.onError)
    }
    //инициализация тестовой ошибки
    // this.foo.bar = 0;


    //4. после того как был изменен state происходит перерисовка компонента
    render() {
        //4.1 если нет state то есть нет выбранного персонажа мы просим его выбрать
        if (!this.state.char) {
            return (
                <span className="select-error">Please select a character</span>
            )
        }

        const { char, loading, error } = this.state;

        const errorMessage = error ? <ErrorMessage /> : null

        const spinner = loading ?
            <Spinner /> : null

        const content = !(loading || error) ? <View char={char} /> : null;

        return (
            <div className="char-details rounded">
                {errorMessage}
                {spinner}
                {content}
                <ul className="list-group list-group-flush">
                    {this.props.children}
                </ul>
            </div>
        );
    }
}

const View = (props) => {
    const { name } = props.char;

    return (
        <>
            <h4>{name}</h4>
            
        </>
    )
}